<template>
  <div class="calendar-months clearfix">
    <a v-for="(item,index) in monthList" :class="[_getClass(index)]" v-text="item" :key="index"
       @click="_selectMonth(index,$event)"></a>
  </div>
</template>

<script>
export default {
  name: "month",
  data() {
    return {};
  },
  props: {
    value: null,         //日期对象
    bodyValue: null,     //选中日期月份默认值
  },
  watch: {},
  components: {},
  methods: {
    _getClass(index) {
      const time = new Date(
        this.value.getFullYear(),
        this.value.getMonth()
      ).toDateString();
      const timeSelect = new Date(
        this.bodyValue.getFullYear(),
        index
      ).toDateString();
      const disableDate = new Date(this.value.getFullYear(), index);
      return {
        "calendar-date-select": time === timeSelect,
        // "calendar-date-disabled": this.$parent.disabledDate(disableDate), // 不能选择的
      };
    },
    _selectMonth(index, e) {
      let disabled = e.target.className;
      //如果不是禁用样式的月份则 发送date 对象到父组件
      if (disabled.indexOf("calendar-date-disabled") === -1) {
        const date = new Date(this.value.getFullYear(), index).toDateString();
        this.$emit("click", date);
      }
    },
  },
  computed: {
    monthList() {
      return [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ];
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.calendar-months {
  background: #fff;
  overflow: hidden;
  z-index: 10;
  a {
    float: left;
    width: 33.33%;
    height: 44px;
    line-height: 44px;
    display: block;
    color: #333;
    cursor: pointer;
    &:hover {
      background: #eaf8fe;
    }
    &.calendar-date-disabled {
      background: #ccc;
      cursor: not-allowed;
    }
    &.calendar-date-old {
      background: #eaf8fe;
    }
    &.calendar-date-select {
      background: #1284e7;
      color: #fff;
      font-weight: 700;
    }
  }
}
</style>
